<template>
  <!-- 通知公告详情 -->
  <main class="main">
    <header>
      <div class="position">
        <div class="logo-wrap">
          <div class="logo">
            <img src="@/assets/logo.png" alt>
            <div>
              <span>工程监管系统</span>
              <span>Project supervision</span>
            </div>
          </div>
          <!--          <CityPositioning class="city" />-->
        </div>
      </div>
    </header>
    <div class="bg-image" :style="{backgroundImage: `url(${noticeBanner})` }">
      <!-- <img src="" alt> -->
    </div>
    <section class="center">
      <div class="nav-tab">
        <span @click="$router.push('/main')">首页</span> >
        公告
      </div>
      <div class="notice-container">
        <div class="content">
          <p class="notice-title">{{ formData.noticeTitle }}</p>
          <article class="article">
            <p class="notice-time">
              <span>{{ formData.createTime }}</span>
              <span>来源：{{ formData.enterpriseName }}</span>
            </p>
            <div class="content" v-html="formData.noticeContent" />
            <p class="editor">责任编辑：{{ formData.createName }}</p>
          </article>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import noticeBanner from '@/assets/noticeBanner.jpg'
import { noticeDtailNo } from '@/api/home'
// import CityPositioning from '@/components/CityPositioning'
export default {
  name: 'NoticeDetail',
  components: {
    // CityPositioning
  },
  data() {
    return {
      noticeBanner,
      // 公告详情
      formData: {
        noticeId: '',
        noticeTitle: '',
        noticeContent: '',
        createName: '',
        createTime: '',
        noticeType: '',
        enterpriseName: ''
      }
    }
  },
  mounted() {
    const { id } = this.$route.query
    this.getDetailById(id)
  },
  methods: {
    // 获取详情
    async getDetailById(id) {
      const { data } = await noticeDtailNo(id)
      this.formData = { ...data }
    }
  }
}
</script>

<style lang='scss' scoped>
.center {
  width: 1200px;
  margin: 0 auto;
  overflow-y: auto;
  .nav-tab {
    font-size: 14px;
    padding: 15px 0;
    span:first-child {
      font-weight: bold;
      cursor: pointer;
    }
  }
  .notice-container {
    overflow: hidden;
    border: 1px solid #eee;
    .notice-title {
      text-align: center;
      font-size: 26px;
      font-weight: 500;
    }
    .article {
      margin: 0 45px;
      .notice-time {
        font-size: 14px;
        color: #999;
        padding-bottom: 15px;
        border-bottom: 1px solid #999;
        span {
          margin-right: 15px;
        }
      }
      .editor {
        text-align: right;
        color: #999;
        font-size: 14px;
      }
      .content {
        color: #333;
      }
    }
  }
}
</style>
